<template>
  <div>
    <div v-if="ppt == ''" class="teaching-header">请选择您上课所使用的PPT</div>
    <div class="teaching-header" v-else>已选择ppt：{{ ppt.name }}</div>
    <div class="teaching">
      <div
        :key="index"
        class="rs-block"
        v-for="(pptResource, index) in pptResources"
      >
        <a-radio-group class="b-select">
          <a-radio :value="index" @click="selectPPT(pptResource)" />
        </a-radio-group>
        <img
          class="rs-block-ppt"
          src="../../../../assets/img/SVGS/ppt.svg"
          alt="logo"
        />
        <div class="b-title">
          {{ pptResource.name }}
        </div>
      </div>
      <br />
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";

export default {
  props: {
    activityMessage: Object,
  },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      sources: (state) => state.teacher.sources,
      curCourseHour: (state) => state.teacher.curCourseHour,
      // ppt:(state)=> state.teacher.courseHours
    }),
    ...mapGetters({
      // pptResources
      pptResources: "teacher/pptResources",
    }),
    ppt() {
      if (this.$store.state.teacher.courseHours[this.curCourseHour])
        return this.$store.state.teacher.courseHours[this.curCourseHour].PPT;
      else return "";
    },
  },
  mounted() {},
  methods: {
    selectPPT(pptResource) {
      this.activityMessage.PPT = {
        name: pptResource.name,
        rsId: pptResource._id,
        url: pptResource.url,
      };
    },
  },
};
</script>

<style lang="scss">
.teaching-header {
  text-align: center;
  font-size: 14px;
  font-weight: 300;
}
.teaching {
  background-color: #f9f7f6;
  color: #000000a6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: 1px solid #eee;
}
.rs-block {
  width: 80px;
  height: 100px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #f9f7f6;
  border: 1px solid #eee;
  border-radius: 3px;
}
.rs-block-ppt {
  width: 100%;
  position: relative;
  top: -10px;
  z-index: 3;
  /* color: #000000a6; */
}
.b-title {
  position: relative;
  bottom: 20px;
  height: 18px;
  background-color: rgba(#101d2c, 0.8);
  color: white;
  text-align: center;
  font-size: 12px;
  border-radius: 3px;
  z-index: 5;
}
.b-select {
  position: relative;
  left: 60px;
  top: 5px;
  z-index: 7;
}
</style>
